Day 04 - Shadcn UI 深色模式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 4

Modern Web

讓你的 UI 動起來：Animate-UI 初探系列第 4 篇

Day 04 - Shadcn UI 深色模式

17th鐵人賽

adsfaaron

團隊第一屆技術創作市集

2025-09-18 11:18:10

83 瀏覽

分享至

前言

深色模式 (Dark Mode) 在近代使用者裝置上顯得越來越普遍，iOS、MacOS、Android、Windows 在更新上都不約而同的推出。長時間暴露在高亮度的白底介面中，往往容易造成眼睛疲勞、乾澀，甚至影響專注力與睡眠品質。為了改善這樣的使用體驗，深色模式誕生了。

或許不見得要一開始就導入深色模式，但若有提供這個啟閉選項，在使用者的體驗上肯定是更好的。想先列出幾個優點以及需要顧慮的點。

優點：

減輕低光環境閱讀疲勞，提升夜間舒適度
OLED 螢幕上較省電
提升視覺吸引力

缺點：

高光環境下可讀性下降
長篇文章閱讀感到不適

設置深色模式

這邊以 Next.js 作為示範，若有需要在 Vite、Astro、Remix 上實作，可以參考 Shadcn/ui Dark Mode。

專案中安裝 next-themes、Shadcn/ui 的 Button、Dropdown Menu、lucide-icon

npm install next-themes
npx shadcn@latest add "https://animate-ui.com/r/icon.json"
npx shadcn@latest add button dropdown-menu

在 components 資料夾，新增 theme-provider.tsx 檔案，並加上以下程式碼

若沒有 components 資料夾，可以在專案目錄中新增

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
    children,
    ...props
    }: React.ComponentProps<typeof NextThemesProvider>) {
        return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

修改 app/layout.tsx

在 import 區域增加

import { ThemeProvider } from "@/components/theme-provider"

並且在 export default function RootLayout(...){return(...)} 中修改

export default function RootLayout({ children }: RootLayoutProps) {
    return (
        <>
        <html lang="zh-Hant" suppressHydrationWarning>
            <head />
            <body>
            <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
            >
                {children}
            </ThemeProvider>
            </body>
        </html>
        </>
    )
}

找個合適的位置放置深淺色模式切換。在這邊的範例中，我將切換按鈕放在 next.js logo 下方。

打開 app/page.tsx，並且將必要的 import 載入
找到 export function ...{} 當中加入這個 React Hook，用途是後面要 onclick 動作時可以觸發
```
const { setTheme } = useTheme()
```

在 return(<html>...</html>) 中加入深淺色模式切換按鈕和 Menu

<DropdownMenu>
    <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
        <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
        <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
        <span className="sr-only">Toggle theme</span>
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
        Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
        Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
        System
        </DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

執行 npm run dev 測試效果

小結

今天示範如何完成深淺色模式的設置，並且觀察在切換深淺色時使用 onClick 事件的運作方式。其實不只 dropdown menu，還能夠透過 switch、icon 等不同元件來實現切換。以上算是最基礎的範例，幫助大家建立概念。
明天我們將進一步探索 Animate UI 的文字動畫效果，看看如何讓文字活起來~